import React, {useState} from 'react';
import {Button, Cascader, CascaderProps, Form, Input, Modal, Space, Tag} from 'antd';
import styles from '../style.less';
import {getRegionTree} from "@/pages/basicdata/area-list/api";
import {Option} from "commander";
import {RightCircleOutlined} from "@ant-design/icons";
import {API} from "@/services/typings";

const {TextArea} = Input;

interface AddAddressFormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: API.ICustomerAddress) => void;
}

const AddAddressForm: React.FC<AddAddressFormProps> = ({
                                                         visible,
                                                         onCancel,
                                                         onSubmit,
                                                       }) => {
  const [form] = Form.useForm();
  const [regionOptions, setRegionOptions] = useState<any[]>([]);

  const onRegionChange: CascaderProps<Option>['onChange'] = (value) => {
    console.log(value);
  };

  const handleSubmit = () => {
    form.validateFields().then(values => {
      const [province, city, district] = values.region
      onSubmit({
        ...values,
        province,
        city,
        district
      });
      form.resetFields();
    });
  };

  const tagOptions = ['家', '公司', '学校', '其他'];

  return (
    <Modal
      title="新增收货地址"
      visible={visible}
      onCancel={onCancel}
      afterOpenChange={async (open) => {
        if (open) {
          const {data} = await getRegionTree()
          setRegionOptions(data)
        } else {
          form.resetFields();
        }
      }}
      footer={
        <Space>
          <Button onClick={onCancel}>取消</Button>
          <Button type="primary" onClick={handleSubmit}>
            保存地址
          </Button>
        </Space>
      }
      width={600}
      destroyOnClose
    >
      <Form form={form} layout="vertical" className={styles.addressForm}>
        <Form.Item
          name="contactName"
          label="收货人"
          rules={[{required: true, message: '请输入收货人姓名'}]}
        >
          <Input placeholder="请输入收货人姓名"/>
        </Form.Item>

        <Form.Item
          name="contactPhone"
          label="手机号码"
          rules={[
            {required: true, message: '请输入手机号码'},
            {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码'}
          ]}
        >
          <Input placeholder="请输入手机号码"/>
        </Form.Item>
        <Form.Item
          name="region"
          label="行政区域"
          rules={[{required: true, message: '请输入行政区域'}]}
        >
          <Cascader
            options={regionOptions}
            onChange={onRegionChange}
            expandIcon={<RightCircleOutlined/>}
            placeholder="请选择区域"/>
        </Form.Item>
        <Form.Item
          name="detailedAddress"
          label="详细地址"
          rules={[{required: true, message: '请输入详细地址'}]}
        >
          <TextArea rows={3} placeholder="请输入详细地址，如街道、门牌号等"/>
        </Form.Item>

        <Form.Item
          name="tags"
          label="地址标签"
          extra="多个标签用逗号分隔，如: 家,公司"
        >
          <Input placeholder="例如: 家,公司"/>
        </Form.Item>

        <div className={styles.tagExamples}>
          <span>常用标签: </span>
          <Space size={[8, 8]} wrap>
            {tagOptions.map(tag => (
              <Tag
                key={tag}
                onClick={() => {
                  const currentTags = form.getFieldValue('tags' as any) || '';
                  form.setFieldsValue({
                    tags: currentTags ? `${currentTags},${tag}` : tag
                  });
                }}
                className={styles.tagExample}
              >
                {tag}
              </Tag>
            ))}
          </Space>
        </div>
      </Form>
    </Modal>
  );
};

export default AddAddressForm;
